<template>
    <div>
        <h3>nihao</h3>
            <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
            <p>
              <el-button type="primary" @click="showOne();">获取编辑器内容</el-button>
            </p>
    </div>
</template>

<script>

// 引入UEditor 感谢：https://msd.misuland.com/pd/2884250068896973728
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },

  data () {
    return {
      msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定!+!$#</h2>',
      myConfig: {
        // 必须设置这个，不然显示不了！！！
        UEDITOR_HOME_URL: '/UEditor/',
        // 上传文件接口
        serverUrl: '',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '50%'
      },
      toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
      ]
    }
  },
  methods: {
    showOne () {
      alert(this.msg)
    }
  }
}
</script>

<style lang="less" scoped>

.edit{
    border: 1px solid red;
}
</style>
